<template>
  <Chart :height="height" :option="chartOption" />
</template>

<script setup>
import Chart from "@/components/charts/index.vue";
import useChartOption from '@/hooks/charts';
import { storeToRefs } from "pinia";
import { useAppStore } from '@/pinia';

const appStore = useAppStore();
const { config } = storeToRefs(appStore);

const props = defineProps({
  height: {
    type: String,
    default: '400px',
  },
  data: {
    type: Array,
    default: () => Array.from({ length: 10 }, (_, i) => ({ name: `数据${i + 1}`, value: Math.floor(Math.random() * 100) }))
  }
});

const primaryColor = '#0065ff';
const secondaryColor = '#b0d0ff';

const getColor = (value) => {
  const maxValue = Math.max(...props.data.map(item => item.value));
  const minValue = Math.min(...props.data.map(item => item.value));
  const threshold = (maxValue + minValue) / 2;
  return value > threshold ? primaryColor : secondaryColor;
};

const { chartOption } = useChartOption(() => {
  return {
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c}'
    },
    xAxis: {
      type: 'value',
      show: false,
      boundaryGap: [0, 0.01]
    },
    yAxis: {
      type: 'category',
      show: false,
      data: props.data.map(item => item.name),
      axisLabel: {
        margin: 20, // 增加标签与柱子之间的间距
      }
    },
    series: [
      {
        name: '数据',
        type: 'bar',
        data: props.data.map(item => ({
          value: item.value,
          itemStyle: { color: getColor(item.value) }
        })),
        label: {
          show: true,
          position: 'right',
          formatter: '{b}: {c}',
          verticalAlign: 'bottom', // 标签在条形图的上方
          distance: 10, // 标签与条形图的距离

        },
        barCategoryGap: '60%', // 控制柱子之间的间距
      }
    ],
    grid: {
      top: '5%', // 调整整体图表的上间距
      bottom: '5%', // 调整整体图表的下间距
    }
  };
});
</script>

<style scoped lang="scss">
</style>